<template>
  <div class="main-container">
    <div class="fixed">
      <h2>检查区：</h2>
      <div v-if="errorList.length">
        <i>{{ errorList.length }}</i>
        <span>处错误，请参照提示修改</span>
        <a @click.stop="seeFail">查看</a>
      </div>
    </div>
    <div class="main-content">
      <div
        class="item"
        @click.stop
        :class="{ is__focus: focusData?.id === data.id }"
        v-for="(data, index) in dataset"
        :key="data.id"
      >
        <div class="mask" @click.stop="focusChange(index)"></div>
        <div class="title">
          <cus-editor
            v-model="data.title"
            hide-border
            placeholder="请输入题干"
            :modelValue="data.title"
            @update:model-value="changeHandle(index, 'title', $event)"
            @ready="$emit('editor-ready')"
          />
        </div>
        <div class="answer">
          <h6>答案</h6>
          <cus-editor
            v-model="data.answer"
            hide-border
            placeholder="请输入答案"
            @blur="focusChange(index)"
            :modelValue="data.answer"
            @update:model-value="changeHandle(index, 'answer', $event)"
          />
        </div>
        <div class="analysis">
          <h6>解析</h6>
          <cus-editor
            :modelValue="data.analysis"
            @update:model-value="changeHandle(index, 'analysis', $event)"
            hide-border
            placeholder="请输入题目解析"
          />
        </div>
        <div class="footer">
          <h4>{{ data.questionTypeName || "其他" }}</h4>
          <p>
            <span>知识点：</span><i>{{ data.knowledgePoints ? `已选择${data.knowledgePoints.length}项` : "-" }}</i>
          </p>
          <p>
            <span>难度：</span>
            <i>{{ data.difficult ? [ { name: "易", id: 11 }, { name: "较易", id: 12 }, { name: "中档", id: 13 }, { name: "较难", id: 14 }, { name: "难", id: 15 } ].find((i) => i.id === data.difficult).name : "-" }}</i>
          </p>
          <div>
            <a v-show="data.failReason">{{ data.failReason }}</a>
            <a v-if="data.similarDegree">重复率{{ data.similarDegree }}%</a>
            <span
              v-if="data.similarDegree"
              @click="questExchange(data.repeatInfos, index)"><i class="iconfont iconhuanti"></i>换题</span>
            <i
              :class="[`el-icon-${data.loading ? 'loading' : 'delete'}`]"
              @click="remove(data)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Ref, computed, nextTick, onMounted } from "vue";
import store from "./../store";
import ExchangeComponent from "./exchange.vue";
import $, { emitter } from "$";
import { questionFormat } from "./../../utils/question-format";

export default {
  setup() {
    onMounted(() => {
      emitter.on("change-error-index", () => {
        errorIndex = 0;
      });
    });
    let dataset: Ref<any[]> = computed({
      get: () => store.state.dataSet,
      set: (val) => store.commit("set_data_set", val),
    });
    const changeHandle = $.debounce((index, key, val) => {
      let data = $.clone(dataset.value);
      data[index][key] = val;
      dataset.value = data;
    }, 300);

    let errorList = computed(() => store.state.errorList);
    let focusData = computed(() => dataset.value[store.state.checkedIndex]);

    const focusChange = (index) =>
      store.dispatch("checked_index_change", index);

    const remove = async (data) => {
      data.loading = true;
      let res = await $.http.post("/tiku/question/delete", { id: data.id });
      res.result && store.commit("delete_data", data.id);
    };
    let errorIndex = 0;
    const seeFail = () => {
      let errorId = errorList.value[errorIndex]["quesId"];
      let index = dataset.value.findIndex((d: { id }) => d.id === errorId);
      index > -1 && store.commit("set_checked_index", index);
      errorIndex = errorIndex < errorList.value.length - 1 ? errorIndex + 1 : 0;
      nextTick(() => {
        let top = (document.querySelector(
          ".main-content .item.is__focus"
        ) as HTMLElement).offsetTop;
        (document.querySelector(".main-content") as HTMLElement).scrollTop =
          top - 50;
      });
    };

    const questExchange = async (repeatInfos, index) => {
      let res: any = await $.modal.create({
        title: "换题",
        zIndex: 2010,
        component: ExchangeComponent,
        props: { repeatInfos },
      });
      let data = questionFormat(res);

      let dataSet = $.clone(dataset.value);
      dataSet[index] = data;
      dataset.value = dataSet;
    };

    return {
      dataset,
      errorList,
      focusData,
      focusChange,
      remove,
      seeFail,
      questExchange,
      changeHandle,
    };
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
  border-radius: 4px;
  position: relative;
  .fixed {
    width: 100%;
    height: 40px;
    padding: 0 24px;
    line-height: 40px;
    background: #f6f7f9;
    border-radius: 6px 6px 0px 0px;
    border: 1px solid #dcdee3;
    h2 {
      font-size: 18px;
      float: left;
    }
    div {
      float: left;
      line-height: 39px;
    }
    i {
      display: inline-block;
      padding: 0 5px;
      margin-right: 5px;
      color: #fff;
      font-size: 12px;
      line-height: 15px;
      background: #ff3b3b;
      border-radius: 2px;
    }
    span {
      color: #ff3b3b;
      font-size: 12px;
      margin-right: 10px;
    }
    a {
      display: inline-block;
      padding: 0 15px;
      color: #fff;
      font-size: 12px;
      line-height: 20px;
      background: #faad14;
      border-radius: 6px;
      cursor: pointer;
      &:active {
        opacity: 0.8;
      }
    }
  }
  .main-content {
    flex: auto;
    padding: 10px 80px;
    overflow: auto;
    .item {
      padding: 20px 20px 30px;
      margin-top: 10px;
      border: solid 1px #fff;
      border-radius: 10px;
      transition: all 0.5s;
      position: relative;
      .mask {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 8;
        cursor: pointer;
      }
      .title {
        margin-bottom: 20px;
        :deep(img) {
          float: none !important;
          position: static !important;
        }
      }
      &:hover {
        box-shadow: 0 0 10px #e9e9e9;
      }
      &.is__focus {
        border-color: #72b22a;
        .mask {
          display: none;
        }
        .footer {
          opacity: 1;
          visibility: visible;
        }
      }
      .answer,
      .analysis {
        display: flex;
        padding: 14px 16px;
        background: #f5f9fd;
        border-radius: 4px;
        margin-bottom: 20px;
        h6 {
          width: 38px;
          color: #3abab3;
          font-size: 12px;
          line-height: 20px;
          text-align: center;
          border-radius: 4px;
        }
        & > div {
          flex: 1 1 38px;
          color: #77808d;
          font-size: 12px;
        }
        :deep(img) {
          float: none !important;
          position: static !important;
        }
      }
      .footer {
        width: 100%;
        height: 36px;
        padding: 0 24px;
        font-size: 12px;
        line-height: 35px;
        border-top: 1px solid #ebf0fc;
        border-radius: 0px 0px 10px 10px;
        background: #ebf0fc;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s;
        .el-icon-loading {
          pointer-events: none;
        }
        h4 {
          color: #1a2633;
        }
        p {
          color: #77808d;
          margin-right: 20px;
        }
        & > *:not(:last-child) {
          display: inline-block;
          margin-right: 20px;
        }
        & > div {
          float: right;
          line-height: 32px;
          a {
            display: inline-block;
            margin-right: 20px;
            padding: 0 8px;
            height: 22px;
            line-height: 22px;
            border-radius: 4px;
            &:first-child {
              color: #ff3d3d;
              background: #fef0f0;
              border: 1px solid #fbc4c4;
            }
            &:nth-of-type(2) {
              color: #ff8421;
              background: #fdf5e6;
              border: 1px solid #f5dab1;
            }
          }
          span {
            margin-right: 20px;
            color: #999;
            cursor: pointer;
            i {
              color: #ff8421;
              font-size: 13px;
              vertical-align: top;
              margin-right: 3px;
            }
          }
          i {
            color: #5b7dff;
            font-size: 18px;
            vertical-align: middle;
            cursor: pointer;
            &:active {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>
